import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';

@Component({
  selector: 'app-cascader',
  templateUrl: './cascader.component.html',
  styleUrls: ['./cascader.component.scss']
})
export class CascaderComponent implements OnInit, OnChanges {

  @Input() firstList = [];
  @Input() secondList = [];
  @Input() info = [];
  @Output() categoryChange = new EventEmitter();
  @Output() categoryStatus = new EventEmitter();
  @Input() status = false;
  @Input() flag = true;

  activeIndex: number = null;
  activeSecondList = [];
  activeId;
  activeSecId;
  _value = [];
  activeCategory;
  activeSecLabel;
  activeLabel;
  freezeActivityCategory = [];
  stepFirstId = '';
  stepFirstLabel = '';
  freezeFirstId = '';
  step1 = false;
  step2 = false;

  constructor() {
  }

  ngOnInit() {

  }

  ngOnChanges(changes: SimpleChanges) {
    let flag = false;
    for (let k in changes) {
      if (k == 'info') {
        flag = true;
      }
    }
    if (this.info.length > 0 && flag) {
      this.activeId = this.info[0]['value'];
      this.activeLabel = this.info[0]['label'];
      this.activeSecId = this.info[1]['value'];
      this.activeSecLabel = this.info[1]['label'];
      this.activeSecondList = [];
      this.secondList.map((e, i) => {
        if (e.parent_id == this.activeId) {
          this.activeSecondList.push({
            label: e.category_name,
            id: e.id
          });
        }
      });
      this._value = [this.activeId, this.activeSecId];
      this.freezeActivityCategory = Object.assign(this._value);
      this.activeCategory = this.activeLabel + ' / ' + this.activeSecLabel;
    }
  }


  showChildren(item) {
    if (this.activeId == item.id) {
      return;
    }
    this.activeSecondList = [];
    this.activeId = item.id;
    this.activeLabel = item.category_name;
    this.activeSecId = null;
    this.secondList.map((e, i) => {
      if (e.parent_id == item.id) {
        this.activeSecondList.push({
          label: e.category_name,
          id: e.id
        });
      }
    });
    this.step1 = true;
    this.stepFirstId = item.id;
    this.stepFirstLabel = item.category_name;
  }

  toggleShow() {
    this.status = !this.status;
    this.activeSecondList = [];
    if (this.step1 == true && this.step2 == false) {
      this.activeId = this._value[0];
      this.stepFirstId = this._value[0];
      this.activeSecId = this._value[1];
    }
    this.secondList.map((e, i) => {
      if (e.parent_id == this.activeId) {
        this.activeSecondList.push({
          label: e.category_name,
          id: e.id
        });
      }
    });
    this.categoryChange.emit([this.status]);
  }

  pushSelected(id, label) {
    this.activeSecId = id;
    this.activeSecLabel = label;
    this.step2 = true;
    if (this.step1 == true) {
      this._value.splice(0, 1, this.stepFirstId);
      this._value.splice(1, 1, id);
    } else {
      this._value.splice(0, 1, this._value[0]);
      this._value.splice(1, 1, id);
    }
    this.step1 = false;
    this.step2 = false;
    this.status = false;
    this.firstList.map((e, i) => {
      if (e.id == this._value[0]) {
        this.activeLabel = e.category_name;
      }
    });
    this.secondList.map((e, i) => {
      if (e.id == this._value[1]) {
        this.activeSecLabel = e.category_name;
      }
    });
    this.activeCategory = this.activeLabel + ' / ' + this.activeSecLabel;
    let emitInfo = Object.assign(this._value);
    emitInfo.splice(2, 1, this.status);
    this.categoryChange.emit(emitInfo);
  }
}
